<!-- UploadRequirementExample.vue -->
<template>
  <div id="UploadRequirementExample">
    <div class="top" style="flex-direction: column;align-items: stretch;">
      <div style="font-size: 16px;height: 40px;">文件上传要求: <span
          style="font-weight: bolder">{{ project.folderName }}: </span>
        <span> {{ project.ifFileRequired == 'Y' ? '文件必传' : '文件非必传' }}。</span>
        {{ project.fileUploadRequirement }}
      </div>
      <div style="display: flex;"
           v-if="!( project.detailName && project.detailName.includes('其他'))">
        <div class="example">示例：</div>
        <div class="exampleImg" v-if="project.folderName == '发票'">
          <el-image
              :preview-src-list="[require('@/assets/example/fapiao1.png'),require('@/assets/example/fapiao2.png')]"
              :src="require('@/assets/example/fapiao1.png')" fit="cover"></el-image>
          <el-image
              :preview-src-list="[require('@/assets/example/fapiao1.png'),require('@/assets/example/fapiao2.png')]"
              :src="require('@/assets/example/fapiao2.png')" fit="cover"></el-image>
        </div>
        <div class="exampleImg" v-if="project.folderName == '双签合同'">
          <el-image :preview-src-list="[require('@/assets/example/hetong1.png')]"
                    :src="require('@/assets/example/hetong1.png')" fit="cover"></el-image>
        </div>
        <div class="exampleImg" v-if="project.folderName == '结算单，情况说明（盖章版）'">
          <el-image
              :preview-src-list="[require('@/assets/example/jiesuandan1.png'),require('@/assets/example/jiesuandan2.png')]"
              :src="require('@/assets/example/jiesuandan1.png')" fit="cover"></el-image>
          <el-image
              :preview-src-list="[require('@/assets/example/jiesuandan1.png'),require('@/assets/example/jiesuandan2.png')]"
              :src="require('@/assets/example/jiesuandan2.png')" fit="cover"></el-image>
        </div>
        <div class="exampleImg" v-if="project.folderName == '会议照片三张（可用长期有效视频替代）'">
          <el-image
              :preview-src-list="[require('@/assets/example/jietu1.png'),require('@/assets/example/jietu2.png'),require('@/assets/example/jietu3.png'),require('@/assets/example/jietu4.png'),require('@/assets/example/jietu5.png')]"
              :src="require('@/assets/example/jietu1.png')" fit="cover"></el-image>
          <el-image
              :preview-src-list="[require('@/assets/example/jietu1.png'),require('@/assets/example/jietu2.png'),require('@/assets/example/jietu3.png'),require('@/assets/example/jietu4.png'),require('@/assets/example/jietu5.png')]"
              :src="require('@/assets/example/jietu2.png')" fit="cover"></el-image>
          <el-image
              :preview-src-list="[require('@/assets/example/jietu1.png'),require('@/assets/example/jietu2.png'),require('@/assets/example/jietu3.png'),require('@/assets/example/jietu4.png'),require('@/assets/example/jietu5.png')]"
              :src="require('@/assets/example/jietu3.png')" fit="cover"></el-image>
          <el-image
              :preview-src-list="[require('@/assets/example/jietu1.png'),require('@/assets/example/jietu2.png'),require('@/assets/example/jietu3.png'),require('@/assets/example/jietu4.png'),require('@/assets/example/jietu5.png')]"
              :src="require('@/assets/example/jietu4.png')" fit="cover"></el-image>
          <el-image
              :preview-src-list="[require('@/assets/example/jietu1.png'),require('@/assets/example/jietu2.png'),require('@/assets/example/jietu3.png'),require('@/assets/example/jietu4.png'),require('@/assets/example/jietu5.png')]"
              :src="require('@/assets/example/jietu5.png')" fit="cover"></el-image>
        </div>
        <div class="exampleImg" v-if="project.folderName == '会议通知、日程、签到表或上线记录'">
          <el-image
              :preview-src-list="[require('@/assets/example/qiandao1.png'),require('@/assets/example/richeng1.png'),require('@/assets/example/shangxianjilu1.png'),require('@/assets/example/yaoqinghan1.png')]"
              :src="require('@/assets/example/qiandao1.png')" fit="cover"></el-image>
          <el-image
              :preview-src-list="[require('@/assets/example/qiandao1.png'),require('@/assets/example/richeng1.png'),require('@/assets/example/shangxianjilu1.png'),require('@/assets/example/yaoqinghan1.png')]"
              :src="require('@/assets/example/richeng1.png')" fit="cover"></el-image>
          <el-image
              :preview-src-list="[require('@/assets/example/qiandao1.png'),require('@/assets/example/richeng1.png'),require('@/assets/example/shangxianjilu1.png'),require('@/assets/example/yaoqinghan1.png')]"
              :src="require('@/assets/example/shangxianjilu1.png')" fit="cover"></el-image>
          <el-image
              :preview-src-list="[require('@/assets/example/qiandao1.png'),require('@/assets/example/richeng1.png'),require('@/assets/example/shangxianjilu1.png'),require('@/assets/example/yaoqinghan1.png')]"
              :src="require('@/assets/example/yaoqinghan1.png')" fit="cover"></el-image>
        </div>


        <div class="exampleImg" v-if="project.detailName == '线下-执行人员服务费用'">
          <el-image
              :preview-src-list="[require('@/assets/example/1750213429484-执行人员费用明细表示例.png'),require('@/assets/example/1750213429484-执行人员费用明细表示例.png')]"
              :src="require('@/assets/example/1750213429484-执行人员费用明细表示例.png')" fit="cover"></el-image>
          <el-image
              :preview-src-list="[require('@/assets/example/1750213429486-执行人员工作照片示例.png'),require('@/assets/example/1750213429486-执行人员工作照片示例.png')]"
              :src="require('@/assets/example/1750213429486-执行人员工作照片示例.png')" fit="cover"></el-image>
        </div>

        <div class="exampleImg" v-if="project.detailName == '线下-铁路运费' && project.folderName=='火车票' ">
          <el-image
              :preview-src-list="[require('@/assets/example/发票示例1.png'),require('@/assets/example/发票示例1.png')]"
              :src="require('@/assets/example/1750213429484-执行人员费用明细表示例.png')" fit="cover"></el-image>
          <el-image
              :preview-src-list="[require('@/assets/example/发票示例2.png'),require('@/assets/example/发票示例2.png')]"
              :src="require('@/assets/example/发票示例2.png')" fit="cover"></el-image>
        </div>

        <div class="exampleImg" v-if="project.detailName == '线下-铁路运费' && project.folderName=='火车票汇总明细表' ">
          <el-image
              :preview-src-list="[require('@/assets/example/铁路明细表示例.png'),require('@/assets/example/铁路明细表示例.png')]"
              :src="require('@/assets/example/铁路明细表示例.png')" fit="cover"></el-image>
        </div>

        <div class="exampleImg" v-if="project.detailName == '线下-场租费'">
          <el-image
              :preview-src-list="[require('@/assets/example/场租发票示例.png'),require('@/assets/example/场租发票示例.png')]"
              :src="require('@/assets/example/场租发票示例.png')" fit="cover"></el-image>

          <el-image
              :preview-src-list="[require('@/assets/example/场租水单示例.png'),require('@/assets/example/场租水单示例.png')]"
              :src="require('@/assets/example/场租水单示例.png')" fit="cover"></el-image>

        </div>


        <div class="exampleImg" v-if="project.detailName == '线下-餐费（茶歇）'">
          <el-image
              :preview-src-list="[require('@/assets/example/餐费发票示例.png'),require('@/assets/example/餐费发票示例.png')]"
              :src="require('@/assets/example/餐费发票示例.png')" fit="cover"></el-image>
          <el-image
              :preview-src-list="[require('@/assets/example/餐费水单示例.png'),require('@/assets/example/餐费水单示例.png')]"
              :src="require('@/assets/example/餐费水单示例.png')" fit="cover"></el-image>
        </div>

        <div class="exampleImg" v-if="project.detailName == '线下-住宿费'">
          <el-image
              :preview-src-list="[require('@/assets/example/住宿发票示例 (1).png'),require('@/assets/example/住宿发票示例 (1).png')]"
              :src="require('@/assets/example/住宿发票示例 (1).png')" fit="cover"></el-image>
          <el-image
              :preview-src-list="[require('@/assets/example/住宿水单示例.png'),require('@/assets/example/住宿水单示例.png')]"
              :src="require('@/assets/example/住宿水单示例.png')" fit="cover"></el-image>

          <el-image
              :preview-src-list="[require('@/assets/example/住宿费用明细表示例.png'),require('@/assets/example/住宿费用明细表示例.png')]"
              :src="require('@/assets/example/住宿费用明细表示例.png')" fit="cover"></el-image>
        </div>

        <div class="exampleImg"
             v-if="project.detailName == '线下-物料费' && project.folderName=='若是第三方制作物料（发票+结算清单+照片）' ">
          <el-image
              :preview-src-list="[require('@/assets/example/物料发票示例.png'),require('@/assets/example/物料发票示例.png')]"
              :src="require('@/assets/example/物料发票示例.png')" fit="cover"></el-image>
          <el-image
              :preview-src-list="[require('@/assets/example/物料费明细表示例.png'),require('@/assets/example/物料费明细表示例.png')]"
              :src="require('@/assets/example/物料费明细表示例.png')" fit="cover"></el-image>

          <el-image
              :preview-src-list="[require('@/assets/example/物料照片示例.png'),require('@/assets/example/物料照片示例.png')]"
              :src="require('@/assets/example/物料照片示例.png')" fit="cover"></el-image>
        </div>

        <div class="exampleImg"
             v-if="project.detailName == '线下-物料费' && project.folderName == '若物料是供应商制作（照片+物料发放明细清单）'">
          <el-image
              :preview-src-list="[require('@/assets/example/物料费明细表示例.png'),require('@/assets/example/物料费明细表示例.png')]"
              :src="require('@/assets/example/物料费明细表示例.png')" fit="cover"></el-image>

          <el-image
              :preview-src-list="[require('@/assets/example/物料照片示例.png'),require('@/assets/example/物料照片示例.png')]"
              :src="require('@/assets/example/物料照片示例.png')" fit="cover"></el-image>
        </div>
        <div class="exampleImg" v-if="project.detailName == '线下-延展设计费(例如:主kv、日程海报、邀请函、桌卡等)'  ">
          <el-image
              :preview-src-list="[require('@/assets/example/设计图片示例1.png'),require('@/assets/example/设计图片示例1.png')]"
              :src="require('@/assets/example/设计图片示例1.png')" fit="cover"></el-image>

          <el-image
              :preview-src-list="[require('@/assets/example/设计图片示例2.png'),require('@/assets/example/设计图片示例2.png')]"
              :src="require('@/assets/example/设计图片示例2.png')" fit="cover"></el-image>
          <el-image
              :preview-src-list="[require('@/assets/example/设计图片示例3.png'),require('@/assets/example/设计图片示例3.png')]"
              :src="require('@/assets/example/设计图片示例3.png')" fit="cover"></el-image>
        </div>

        <div class="exampleImg" v-if="project.detailName == '线下-交通费(例如:滴滴出行)'  ">
          <el-image
              :preview-src-list="[require('@/assets/example/行程单示例.png'),require('@/assets/example/行程单示例.png')]"
              :src="require('@/assets/example/行程单示例.png')" fit="cover"></el-image>

          <el-image
              :preview-src-list="[require('@/assets/example/用车发票示例.png'),require('@/assets/example/用车发票示例.png')]"
              :src="require('@/assets/example/用车发票示例.png')" fit="cover"></el-image>
          <el-image
              :preview-src-list="[require('@/assets/example/用车明细表示例1.png'),require('@/assets/example/用车明细表示例1.png')]"
              :src="require('@/assets/example/用车明细表示例1.png')" fit="cover"></el-image>
          <el-image
              :preview-src-list="[require('@/assets/example/用车明细表示例2.png'),require('@/assets/example/用车明细表示例2.png')]"
              :src="require('@/assets/example/用车明细表示例2.png')" fit="cover"></el-image>
        </div>

      </div>
    </div>

  </div>

</template>

<script>
export default {
  name: 'UploadRequirementExample',
  props: {
    project: {
      type: Object,
      required: true
    }
  }
}
</script>

<style scoped>

#UploadRequirementExample {

  .top {
    padding: 20px;
    margin-bottom: 20px;
    border-radius: 20px;
    box-shadow: 0 2px 18px rgba(203, 203, 203, 0.31);
    display: flex;
    align-items: center;

    .example {
      font-size: 16px;
      color: #666;
    }

    .exampleImg {
      .el-image {
        width: 60px;
        height: 60px;
        border-radius: 6px;
        margin-left: 10px;
        box-shadow: 0 2px 18px rgba(20, 20, 20, 0.21);
      }
    }

    .title {
      font-size: 20px;
      padding: 0 20px 0 30px;
      position: relative;

      i {
        top: 50%;
        left: 0px;
        width: 20px;
        height: 20px;
        position: absolute;
        border-radius: 50%;
        background-color: #3563E9;
        border: 5px solid #C2D0F8;
        transform: translateY(-50%);
      }
    }


  }


}
</style>